<template>

        <transition-group appear mode="out-in" tag="div" id="box">
            <el-card style="margin-bottom: 5px;border-radius: 10px;" class="box-card" v-for="(item,i) in merchants" v-bind:key="item.shopId">
                <router-link :to="'/home/shop/'+item.shopId" class="merchantPar">
                    <div class="merchant">
                        <div class="merchantTitle">
                            <span class="merchantName">{{item.shopName}}</span>
                            <!-- <span class="merchantTag">{{item.merchantTag}}</span> -->
                        </div>
                        <div>
                            <span class="delBtn">
                                <i @click.stop="dialogVisible =true" class="el-icon-close"></i>
                                <el-dialog
                                    title="提示"
                                    :visible.sync="dialogVisible"
                                    width="80%"
                                    :before-close="handleClose">
                                    <span>你真的不想看到我嘛</span>
                                    <span slot="footer" class="dialog-footer">
                                        <el-button @click.stop="dialogVisible = false">取消</el-button>
                                        <el-button type="primary" @click.stop="close(i)">是的</el-button>
                                    </span>
                                </el-dialog>
                            </span>
                        </div>
                    </div>
                        <div>
                            <el-tag size="mini" type="success"   style="color: #F29B59;">{{item.avgScore==null?0:item.avgScore}}分</el-tag>
                            <el-tag size="mini" type="success"  >已售{{item.monthSales}}</el-tag>
                            <el-tag size="mini" type="success"  >配送费￥{{item.shippingFee}}</el-tag>
                            <!-- | -->
                            <!-- <span>人均￥{{item.avgCost}}</span> -->
                        </div>
                        <div>
                            <el-tag size="mini">
                                {{item.deliveryTime}}分钟送达
                            </el-tag>
                        </div>
                    <div v-if="item.discountList!=''" class="discount">
                        <div>
                            <el-tag  size="mini">店铺优惠</el-tag>
                            <el-tag  type="danger" size="mini">
                                <p v-for="(a,aIndex) in item.discountList" :key="aIndex">
                                    满{{a.satisfy}}减{{a.reduce}}
                                </p>
                            </el-tag>
                        </div>
                    </div>
<!--                    <div class="evaluation">-->
<!--                        <div>-->
<!--                            <span>花都区日韩料理人气第6名</span>-->
<!--                            <span>支持自取</span>-->
<!--                            <span>味道很好也经常点</span>-->
<!--                        </div>-->
<!--                    </div>-->
                    <div style="display: flex;justify-content: space-between;" class="goods">
                        <div v-for="(goods,goodsIndex) in item.goodsList" v-bind:key="goodsIndex" v-if="goodsIndex<3">
                            <div>
                                <el-image style="width: 100px;height: 100px;" fit="cover" :src="$url1+goods.goodsImg"></el-image>
                                <div class="price" style="flex-direction: row">
                                    <p>￥{{goods.goodsPrice}}</p>
                                    <p style="text-decoration: line-through;">￥30</p>
                                </div>
                            </div>
                            <span>{{goods.goodsName}}</span>
                        </div> 
                        <!-- <div>
                            <div>
                                <img src="http://127.0.0.1:3000/static/img/daishu.jpg" alt="">
                                <div class="pirce" style="flex-direction: row">
                                    <p>￥19.9</p>
                                    <p style="text-decoration: line-through;">￥30</p>
                                </div>
                            </div>
                            <span>海胆爆浆蟹柳</span>
                        </div>
                        <div>
                            <div>
                                <img src="http://127.0.0.1:3000/static/img/daishu.jpg" alt="">
                                <div class="pirce" style="flex-direction: row">
                                    <p>￥19.9</p>
                                    <p style="text-decoration: line-through;">￥30</p>
                                </div>
                            </div>
                            <span>海胆爆浆蟹柳</span>
                        </div>
                        <div>
                            <div>
                                <img src="http://127.0.0.1:3000/static/img/daishu.jpg" alt="">
                                <div class="pirce" style="flex-direction: row">
                                    <p>￥19.9</p>
                                    <p style="text-decoration: line-through;">￥30</p>
                                </div>
                            </div>
                            <span>海胆爆浆蟹柳</span>
                        </div> -->
                    </div>
                </router-link>
            </el-card>
        </transition-group>
       

</template>
<script>
    export default {
            data(){
                return {
                    dialogVisible: false,
                    merchants:[
                        {
                            id:1,
                            merchantName:'车前外带寿司',
                            merchantTag:'外卖',
                            monthSales:'700',
                            shippingFee:2,
                            avgCost:21,
                            spendTime:30,
                            newSale:[
                                '10减6',
                                '35减18',
                                '49减21',
                                '3.34折起'
                            ]
                        },
                    ]
                }
            },
        methods: {
            close(i){
                this.merchants.splice(i,i)
                this.dialogVisible = false
            },
            getShops(){
                this.$axios({
                    method:'get',
                    url:'/merchant/getShopWithGoods'
                }).then(r=>{
                    this.merchants = r.data
                })
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => {});
            },
        },
        created(){
            this.getShops()
        }
    }
</script>
<style lang='less' scoped>
    /deep/ .el-tag{
        margin-right: 5px;
    }
    .merchantPar{
        >div{
            margin: 10px 0;
        }
    }
    .info{
        margin: 20px 0;
    }
    .el-dialog__wrapper{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    /* v-enter 【进入之前，元素的起始状态】 */
    /* v-leave-to 【动画离开之后，离开的终止状态】 */
    .v-enter,
    .v-leave-to {
        opacity: 0;
        transform: translateX(150px);
    }
    /* v-enter-active 【入场动画的时间段】 */
    /* v-leave-active 【离场动画的时间段】 */
    .v-enter-active,
    .v-leave-active{
        transition: all 0.8s ease;
    }
    .v-move {
        transition: all 0.4s ease;
    }
    /* 一般配合 v-leave-active / v-enter-active 使用 */
    .v-leave-active{
        position: absolute;
    }
    #box {
        padding: 10px 0;
        width: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        background-color: #F5F5F4;
        margin-bottom: 20px;
        .el-card{
            width: 95%;
        }
    }

    .container {
        width: 95%;
        background-color: white;
        border-radius: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 5px 0;
        box-shadow: 0 0 10px #7F7F7F;
    }

    .containerCon {
        padding: 10px 0;
        width: 95%;
    }
    
    .merchant {
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        align-items: center;
    }

    .merchantTitle {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

    }

    .merchantTag {
        padding: 0 8px;
        font-size: 10px;
        background: #F6D25A;
        border-radius: 5px;
    }

    .merchantName {
        font-weight: 800;
        font-size: 20px;
    }
    .active{
        .delBtn i {
        background-color: black;
    }
    }
    .delBtn i {
        border: 2px solid #F5F5F4;
        padding: 0 5px;
        border-radius: 10px;
    }

    .info {
        font-size: 10px;
        display: flex;
        color: #7F7F7F;
        flex-direction: row;
        justify-content: space-between;
    }

    .discount {
        font-size: 10px;
        color: black;
        div{
            display: flex;
            flex-direction: row;
            span{
                display: flex;
            }
        }
    }

    .newPeople {
        background-color: #F15436;
        color: white;
        padding: 0 5px;
        border-radius: 5px;
    }

    .evaluation {
        font-size: 10px;
        color: #7F7F7F;
    }

    .evaluation div {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .evaluation div span {
        border: 1px solid #D0D0D0;
        padding: 0 5px;
        margin-right: 3px;
    }

    .goods {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        font-size: 10px;
        font-weight: 900;
    }

    .goods div {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 5px;
    }
    .goods img {
        width: 100px;
        border-radius: 5px;

    }

    .containerCon>div {
        margin: 5px;
    }
</style>